{% extends 'base.html' %}
{#广告位#}
{% block advert %}

    <div id="demo" class="carousel slide" align="center" data-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
        </ul>
        <!-- 轮播图片 -->

        <a href="#">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <a href="https://ai.taobao.com/"><img src="/static/img/advert1.jpeg" width="1000px" height="400px"></a>
                </div>
                <div class="carousel-item">
                    <a href="https://www.meishij.net/chufang/diy/haixian/"><img src="/static/img/advert2.jpeg" width="1000px" height="400px"></a>
                </div>
                <div class="carousel-item">
                    <a href="http://www.kede.com/hankj.html"><img src="/static/img/advert3.jpeg" width="1000px" height="400px"></a>
                </div>
            </div>
        </a>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>  {#    推荐文章#}
    <h3 style="color: #516aec">推荐文章</h3>
    <div class="recommend-bottom">
        {% for hot_pl in hot_pl %}
            <div class="recommend-panel-top">
                <a href="{% url 'home:detail' %}?id={{ hot_pl.id }}">
                    <div class="bb" >
                        <img src="{{ hot_pl.avatar.url }}" class="img-fluid">
                        <h4>标题：{{ hot_pl.title }}</h4>
                    </div>
                </a>
            </div>
        {% endfor %}
    </div>

{% endblock %}



{#内容#}
{% block nei %}

    {% for article in articles %}
        <div class="cl-card">
            <div class="row">
                <div class="col-lg-3 col-md-4 col-sm-12 cl-card-image"><a
                        href="{% url 'home:detail' %}?art_id={{ article.id }}"><img
                        src="{{ article.avatar.url }}" class="aa" alt=""></a></div>
                <div class="col-lg-9 col-md-8 col-sm-12 cl-card-main">
                    <h4>
                        <b><a href="{% url 'home:detail' %}?art_id={{ article.id }}"
                              style="color: black;">{{ article.title }}</a></b>
                    </h4>
                    <p class="cl-card-main-info">
                        {{ article.sumary }}
                    </p>
                    <div style="color: #3E87E3"><span>{{ article.total_views }}</span>人浏览 /
                        <span>{{ article.comments_count }}</span>人评论
                    </div>
                    <p class="cl-card-more"><a href="">阅读更多...</a></p>
                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}